<template>
  <div>
    <div class="date-picker" v-if="showFilterBar">
      <p class="filter-label">批次筛选:</p>
      <div>
        <el-check-tag
          class="mr-3"
          v-for="(tag, idx) in batchs"
          :key="idx"
          :checked="form.year === tag.dictValue"
          @click="checkTag(tag.dictValue)"
        >
          {{ tag["dictLabel"] }}
        </el-check-tag>
        <el-date-picker
          v-if="form.year === '0'"
          @change="yearChange"
          v-model="form.year2"
          type="year"
          value-format="YYYY"
          format="YYYY"
          placeholder="选择项目批次"
        />
      </div>
    </div>
    <div
      v-if="loading"
      class="loading"
      v-loading="loading"
      element-loading-text="图表正在拼命加载中...."
    ></div>
    <div class="analysis-page">
      <template v-for="(item, index) in pieData" :key="index">
        <div class="pie-item" v-if="item.length">
          <div
            class="close-pie"
            v-if="index === pieData.length - 1 && pieData.length > 1"
            @click="closePieByIndex(index)"
          >
            <el-icon><CircleCloseFilled /></el-icon>
          </div>
          <pie
            v-if="item.length"
            :info="pieInfo"
            :data="item"
            @querySubPieData="(e:any) => querySubPieData(e,index)"
          />
        </div>
        <div v-else class="is-empty">
          <el-empty :description="`暂无${pieInfo.title}数据`" />
        </div>
        <div class="arrow-box">
          <svg-icon
            class="arrow"
            v-if="pieData.length > 1 && index < pieData.length - 1"
            name="arrowRight"
            size="65px"
          />
        </div>
      </template>
      <template v-if="itemLoading">
        <div class="arrow-box">
          <svg-icon class="arrow" name="arrowRight" size="65px" />
        </div>
        <div
          class="loading-item"
          v-loading="itemLoading"
          element-loading-text="加载中...."
        ></div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import pie from "../../components/echarts/components/pie.vue";
import { useAnalysisHook } from "./hook";
import { CircleCloseFilled } from "@element-plus/icons-vue";

const {
  detailInfo,
  pieData,
  pieInfo,
  querySubPieData,
  closePieByIndex,
  batchs,
  form,
  checkTag,
  yearChange,
  loading,
  itemLoading,
  showFilterBar
} = useAnalysisHook();
</script>

<style scoped lang="postcss">
.loading {
  @apply mt-4;
  height: 100vh;
}
.analysis-page {
  @apply p-10 overflow-x-auto w-full;
  display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  .pie-item {
    @apply bg-white inline-block p-4 relative top-0 rounded-md;
    min-height: 700px;
    min-width: 700px;
    box-sizing: border-box;
    transition: 0.4s all;
    &:hover {
      box-shadow: 0 4px 4px #ccc;
      top: -5px;
    }
    .close-pie {
      @apply absolute -right-2 -top-3 text-red-500;
      font-size: 30px;
    }
  }
  .arrow-box {
    @apply flex justify-center;
    width: 500px;
  }
  .arrow {
    @apply my-5;
    width: 65px;
    height: 65px;
    transform: rotate(90deg);
  }

  .is-empty,
  .loading-item {
    @apply flex items-center justify-center p-4 bg-white rounded-md;
    box-sizing: content-box;
    width: 500px;
    height: 500px;
  }
}

.date-picker {
  @apply flex items-center mt-6 ml-9;
  .filter-label {
    @apply font-bold mr-4;
  }
  :deep(.el-check-tag) {
    @apply bg-gray-200;
  }
  :deep(.el-check-tag.is-checked) {
    @apply bg-theme-color text-white;
  }
}
</style>
